<template>
    <div id="dot">
        <header-item :activeIndex="activeIndex"></header-item>
        <div style="text-align: left; width: 1200px; margin: 10px auto">
            <el-popover
            placement="top"
            width="300"
            style="text-align: left">
                <div style="text-align: letf; margin: 0">
                    <span>订单号</span>
                    <el-input style="width: 80%" v-model="orderId" placeholder="请输入订单号"></el-input>
                    <el-button type="primary" size="mini" @click="handleReceivePackage">确定</el-button>
                </div>
                <el-button type="primary" slot="reference">接收快件</el-button>
            </el-popover>
        </div>
        <el-tabs @tab-click="handleClick" type="border-card" class="el-table border-card">
            <el-tab-pane label="待运输">
                <div class="search">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="按照时间">
                        <el-select v-model="formInline.number">
                        <el-option label="一天内" value="1"></el-option>
                        <el-option label="一周内" value="7"></el-option>
                        <el-option label="两周内" value="14"></el-option>
                        <el-option label="一个月内" value="30"></el-option>
                        <el-option label="两个月内" value="60"></el-option>
                        <el-option label="一年内" value="365"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="formInline.nameLike" placeholder="模糊查询"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('待运输')">查询</el-button>
                    </el-form-item>
                    </el-form>
                </div>
                <el-table
                    :data="tableData">
                    <el-table-column
                        prop="orderCode"
                        label="订单号">
                    </el-table-column>
                    <el-table-column
                        prop="jname"
                        label="寄件人姓名">
                    </el-table-column>
                    <el-table-column
                        prop="jtelephone"
                        label="寄件人电话">
                    </el-table-column>
                    <el-table-column label="寄件人地址">
                        <template slot-scope="scope">
                            {{scope.row.jprovince+scope.row.jcity+scope.row.jarea+scope.row.jaddressDetail}}
                        </template>
                    </el-table-column>
                     <el-table-column
                        prop="sname"
                        label="收件人姓名">
                    </el-table-column>
                    <el-table-column
                        prop="stelephone"
                        label="收件人电话">
                    </el-table-column>
                    <el-table-column label="收件人地址">
                        <template slot-scope="scope">
                            {{scope.row.sprovince+scope.row.scity+scope.row.sarea+scope.row.saddressDetail}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="lookingTime"
                        label="期望上门时间">
                    </el-table-column>
                    <el-table-column
                        prop="currentStatusText"
                        label="快递状态">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <div v-show="scope.row.state == 0">
                                <el-popover
                                    placement="left"
                                    width="300"
                                    trigger="click">
                                    <div>
                                        <el-select v-model="kdyUserId" placeholder="请选择快递员">
                                            <el-option
                                            v-for="item in options"
                                            :key="item.id"
                                            :label="item.username"
                                            :value="item.id">
                                            </el-option>
                                        </el-select>
                                        <el-button type="primary" size="mini" @click="handlesendPackage(scope.row,'待运输')">确定</el-button>
                                    </div>
                                    <el-button type="primary" size="small" slot="reference" @click="getKdy(scope.row)">发出快件</el-button>
                                </el-popover>
                            </div>
                            <span v-show="scope.row.state == 1" style='color: red'>已发出</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="查看">
                        <template slot-scope="scope">
                            <el-popover
                                placement="left"
                                width="500">
                                <div class="express-track">
                                    <p class="title">订单详情</p>
                                    <ul class="detail"> 
                                        <li>
                                            <span>订单状态：</span>
                                            <span>{{details.consumerStatus}}</span>
                                        </li>
                                        <li>
                                            <span>快递状态：</span>
                                            <span>{{details.currentStatusText}}</span>
                                        </li>
                                        <li>
                                            <span>快递员：</span>
                                            <span>{{details.kname}}</span>
                                        </li>
                                        <li>
                                            <span>快递员电话：</span>
                                            <span>{{details.ktelephone}}</span>
                                        </li>
                                        <li>
                                            <span>寄件人姓名：</span>
                                            <span>{{details.jname}}</span>
                                        </li>
                                        <li>
                                            <span>寄件人电话：</span>
                                            <span>{{details.jtelephone}}</span>
                                        </li>
                                        <li>
                                            <span>寄件地址：</span>
                                            <span>{{details.jprovince+details.jcity+details.jarea+details.jaddressDetail}}</span>
                                        </li>
                                        <li>
                                            <span>收件人姓名：</span>
                                            <span>{{details.sname}}</span>
                                        </li>
                                        <li>
                                            <span>收件人电话：</span>
                                            <span>{{details.stelephone}}</span>
                                        </li>
                                        <li>
                                            <span>收件地址：</span>
                                            <span>{{details.sprovince+details.scity+details.sarea+details.saddressDetail}}</span>
                                        </li>
                                        <li>
                                            <span>期望取件时间：</span>
                                            <span>{{details.lookingTime}}</span>
                                        </li>
                                        
                                        <li>
                                            <span>寄件方式：</span>
                                            <span>{{details.type==1?'快递员上门':'网点自寄'}}</span>
                                        </li>
                                        <li>
                                            <span>快递公司：</span>
                                            <span>{{details.companyName}}</span>
                                        </li>
                                        <li>
                                            <span>付费方式：</span>
                                            <span>{{details.paymentMethod}}</span>
                                        </li>
                                        <li>
                                            <span>物品信息：</span>
                                            <span>{{details.goodsType==1?'书籍':details.goodsType==2?'衣物':details.goodsType==3?'电子产品':details.goodsType==4?'食品':'其他'}}</span>
                                        </li>
                                        <li>
                                            <span>保价费用：</span>
                                            <span>{{details.insuranceMoney?details.insuranceMoney:0}}</span>
                                        </li>
                                        <li>
                                            <span>备注：</span>
                                            <span>{{details.remarks}}</span>
                                        </li>
                                    </ul>
                                </div>
                                <el-button
                                    size="mini"
                                    type="danger" slot="reference" @click="handleXq(scope.$index, scope.row)">详情</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="运输中">
                <div class="search">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="按照时间">
                        <el-select v-model="formInline.number">
                        <el-option label="一天内" value="1"></el-option>
                        <el-option label="一周内" value="7"></el-option>
                        <el-option label="两周内" value="14"></el-option>
                        <el-option label="一个月内" value="30"></el-option>
                        <el-option label="两个月内" value="60"></el-option>
                        <el-option label="一年内" value="365"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="formInline.nameLike" placeholder="模糊查询"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('运输中')">查询</el-button>
                    </el-form-item>
                    </el-form>
                </div>
                <el-table
                    :data="tableData">
                    <el-table-column
                        prop="orderCode"
                        label="订单号">
                    </el-table-column>
                    <el-table-column
                        prop="jname"
                        label="寄件人姓名">
                    </el-table-column>
                    <el-table-column
                        prop="jtelephone"
                        label="寄件人电话">
                    </el-table-column>
                    <el-table-column label="寄件人地址">
                        <template slot-scope="scope">
                            {{scope.row.jprovince+scope.row.jcity+scope.row.jarea+scope.row.jaddressDetail}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="sname"
                        label="收件人姓名">
                    </el-table-column>
                    <el-table-column
                        prop="stelephone"
                        label="收件人电话">
                    </el-table-column>
                    <el-table-column label="收件人地址">
                        <template slot-scope="scope">
                            {{scope.row.sprovince+scope.row.scity+scope.row.sarea+scope.row.saddressDetail}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="lookingTime"
                        label="期望上门时间">
                    </el-table-column>
                    <el-table-column
                        prop="currentStatusText"
                        label="快递状态">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <!-- receiveStatus：是否接单   state：是否发出 -->
                            <div v-show="scope.row.receiveStatus == 1 && scope.row.state == 0">
                                <el-popover
                                    placement="left"
                                    width="300"
                                    trigger="click">
                                    <div>
                                        <el-select v-model="kdyUserId" placeholder="请选择快递员">
                                            <el-option
                                            v-for="item in options"
                                            :key="item.id"
                                            :label="item.username"
                                            :value="item.id">
                                            </el-option>
                                        </el-select>
                                        <el-button type="primary" size="mini" @click="handlesendPackage(scope.row,'运输中')">确定</el-button>
                                    </div>
                                    <el-button type="primary" size="small" slot="reference" @click="getKdy(scope.row)">发出快件</el-button>
                                </el-popover>
                                <el-button type="primary" size="small" slot="reference" @click="handleupdateFinish(scope.row)">通知取件</el-button>
                            </div>
                            <span style="color: red" v-show="scope.row.state == 1">已发出</span>
                            <el-popover
                            placement="left"
                            width="500">
                            <div class="express-track">
                                <p class="title">快件跟踪</p>
                                <p v-show="!activities.length">没有查到快递信息</p>
                                <el-timeline :reverse="reverse">
                                    <el-timeline-item
                                    class="timeLine-item"
                                    v-for="(activity, index) in activities"
                                    :key="index"
                                    :timestamp="activity.location">
                                    {{activity.publishTime}}
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                            <el-button
                                size="mini"
                                type="danger" slot="reference" @click="handleSee(scope.$index, scope.row)">快递</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    
                    <el-table-column align="right" label="查看">
                        <template slot-scope="scope">
                            <el-popover
                                placement="left"
                                width="500">
                                <div class="express-track">
                                    <p class="title">订单详情</p>
                                    <ul class="detail"> 
                                        <li>
                                            <span>订单状态：</span>
                                            <span>{{details.consumerStatus}}</span>
                                        </li>
                                        <li>
                                            <span>快递状态：</span>
                                            <span>{{details.currentStatusText}}</span>
                                        </li>
                                        <li>
                                            <span>快递员：</span>
                                            <span>{{details.kname}}</span>
                                        </li>
                                        <li>
                                            <span>快递员电话：</span>
                                            <span>{{details.ktelephone}}</span>
                                        </li>
                                        <li>
                                            <span>寄件人姓名：</span>
                                            <span>{{details.jname}}</span>
                                        </li>
                                        <li>
                                            <span>寄件人电话：</span>
                                            <span>{{details.jtelephone}}</span>
                                        </li>
                                        <li>
                                            <span>寄件地址：</span>
                                            <span>{{details.jprovince+details.jcity+details.jarea+details.jaddressDetail}}</span>
                                        </li>
                                        <li>
                                            <span>收件人姓名：</span>
                                            <span>{{details.sname}}</span>
                                        </li>
                                        <li>
                                            <span>收件人电话：</span>
                                            <span>{{details.stelephone}}</span>
                                        </li>
                                        <li>
                                            <span>收件地址：</span>
                                            <span>{{details.sprovince+details.scity+details.sarea+details.saddressDetail}}</span>
                                        </li>
                                        <li>
                                            <span>期望取件时间：</span>
                                            <span>{{details.lookingTime}}</span>
                                        </li>
                                        
                                        <li>
                                            <span>寄件方式：</span>
                                            <span>{{details.type==1?'快递员上门':'网点自寄'}}</span>
                                        </li>
                                        <li>
                                            <span>快递公司：</span>
                                            <span>{{details.companyName}}</span>
                                        </li>
                                        <li>
                                            <span>付费方式：</span>
                                            <span>{{details.paymentMethod}}</span>
                                        </li>
                                        <li>
                                            <span>物品信息：</span>
                                            <span>{{details.goodsType==1?'书籍':details.goodsType==2?'衣物':details.goodsType==3?'电子产品':details.goodsType==4?'食品':'其他'}}</span>
                                        </li>
                                        <li>
                                            <span>保价费用：</span>
                                            <span>{{details.insuranceMoney?details.insuranceMoney:0}}</span>
                                        </li>
                                        <li>
                                            <span>备注：</span>
                                            <span>{{details.remarks}}</span>
                                        </li>
                                    </ul>
                                </div>
                                <el-button
                                    size="mini"
                                    type="danger" slot="reference" @click="handleXq(scope.$index, scope.row)">详情</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="已完成">
                <div class="search">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="按照时间">
                        <el-select v-model="formInline.number">
                        <el-option label="一天内" value="1"></el-option>
                        <el-option label="一周内" value="7"></el-option>
                        <el-option label="两周内" value="14"></el-option>
                        <el-option label="一个月内" value="30"></el-option>
                        <el-option label="两个月内" value="60"></el-option>
                        <el-option label="一年内" value="365"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="formInline.nameLike" placeholder="模糊查询"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('已完成')">查询</el-button>
                    </el-form-item>
                    </el-form>
                </div>
                <el-table
                    :data="tableData">
                    <el-table-column
                        prop="orderCode"
                        label="订单号">
                    </el-table-column>
                    <el-table-column
                        prop="jname"
                        label="寄件人姓名">
                    </el-table-column>
                    <el-table-column
                        prop="jtelephone"
                        label="寄件人电话">
                    </el-table-column>
                    <el-table-column label="寄件人地址">
                        <template slot-scope="scope">
                            {{scope.row.jprovince+scope.row.jcity+scope.row.jarea+scope.row.jaddressDetail}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="sname"
                        label="收件人姓名">
                    </el-table-column>
                    <el-table-column
                        prop="stelephone"
                        label="收件人电话">
                    </el-table-column>
                    <el-table-column label="收件人地址">
                        <template slot-scope="scope">
                            {{scope.row.sprovince+scope.row.scity+scope.row.sarea+scope.row.saddressDetail}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="lookingTime"
                        label="期望上门时间">
                    </el-table-column>
                    <el-table-column
                        prop="currentStatusText"
                        label="快递状态">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-popover
                                placement="top"
                                width="160">
                                <p>网点评分：{{scope.row.kevaluation}}</p>
                                <p>快递员评分：{{scope.row.nkEvaluation}}</p>
                                <p>建议：{{scope.row.consumerEvaluation}}</p>
                                <el-button slot="reference" type='primary'>查看评价</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="查看">
                        <template slot-scope="scope">
                            <el-popover
                                placement="left"
                                width="500">
                                <div class="express-track">
                                    <p class="title">订单详情</p>
                                    <ul class="detail"> 
                                        <li>
                                            <span>订单状态：</span>
                                            <span>{{details.consumerStatus}}</span>
                                        </li>
                                        <li>
                                            <span>快递状态：</span>
                                            <span>{{details.currentStatusText}}</span>
                                        </li>
                                        <li>
                                            <span>快递员：</span>
                                            <span>{{details.kname}}</span>
                                        </li>
                                        <li>
                                            <span>快递员电话：</span>
                                            <span>{{details.ktelephone}}</span>
                                        </li>
                                        <li>
                                            <span>寄件人姓名：</span>
                                            <span>{{details.jname}}</span>
                                        </li>
                                        <li>
                                            <span>寄件人电话：</span>
                                            <span>{{details.jtelephone}}</span>
                                        </li>
                                        <li>
                                            <span>寄件地址：</span>
                                            <span>{{details.jprovince+details.jcity+details.jarea+details.jaddressDetail}}</span>
                                        </li>
                                        <li>
                                            <span>收件人姓名：</span>
                                            <span>{{details.sname}}</span>
                                        </li>
                                        <li>
                                            <span>收件人电话：</span>
                                            <span>{{details.stelephone}}</span>
                                        </li>
                                        <li>
                                            <span>收件地址：</span>
                                            <span>{{details.sprovince+details.scity+details.sarea+details.saddressDetail}}</span>
                                        </li>
                                        <li>
                                            <span>期望取件时间：</span>
                                            <span>{{details.lookingTime}}</span>
                                        </li>
                                        
                                        <li>
                                            <span>寄件方式：</span>
                                            <span>{{details.type==1?'快递员上门':'网点自寄'}}</span>
                                        </li>
                                        <li>
                                            <span>快递公司：</span>
                                            <span>{{details.companyName}}</span>
                                        </li>
                                        <li>
                                            <span>付费方式：</span>
                                            <span>{{details.paymentMethod}}</span>
                                        </li>
                                        <li>
                                            <span>物品信息：</span>
                                            <span>{{details.goodsType==1?'书籍':details.goodsType==2?'衣物':details.goodsType==3?'电子产品':details.goodsType==4?'食品':'其他'}}</span>
                                        </li>
                                        <li>
                                            <span>保价费用：</span>
                                            <span>{{details.insuranceMoney?details.insuranceMoney:0}}</span>
                                        </li>
                                        <li>
                                            <span>备注：</span>
                                            <span>{{details.remarks}}</span>
                                        </li>
                                    </ul>
                                </div>
                                <el-button
                                    size="mini"
                                    type="danger" slot="reference" @click="handleXq(scope.$index, scope.row)">详情</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-tabs>
    </div>
</template>
<script>
import Header from './header'
import global from '@/lib/global'
import qs from 'qs'
export default {
    components: {
        'header-item': Header
    },
    name:'Dot',
    data(){
        return{
            activeIndex: "1",
            reverse: true,
            visible: false,
            activities:[],
            formInline:{
                number: '1',
                nameLike:''
            },
            tableData:[],
            kdyUserId:'',
            options: [],
            orderId:'',
            pingjia:{},
            messgeList:{},
            details:'',
            // 分页参数
            currentPage:1,
            total:0,
            label:'待运输',
            pageSize:1,
            pageSizes:[1, 5, 10, 20],
            page: 1,
            limit: 1,
        }
    },
    created(){
        this.getData(global.baseUrl + '/orderInfo/orderLikeQuery?nameLike=&number=1&type=待运输&page='+this.page+'&limit='+this.limit,'','get',(resp)=>{
            if(resp.data.success){
                this.tableData = resp.data.data.data;
                this.total = resp.data.data.count
            }else{
                this.$message.error(resp.data.message);
            }
        })
    },
    methods:{
        onSubmit(data){
            this.getData(global.baseUrl + '/orderInfo/orderLikeQuery?nameLike='+this.formInline.nameLike+'&number='+this.formInline.number+'&type='+data+'&page='+this.page+'&limit='+this.limit,'','get',(resp)=>{
               debugger;
               if(resp.data.success){
                this.tableData = resp.data.data.data;
                this.total = resp.data.data.count
               }else{
                this.$message.error(resp.data.message);
               }
            })
        },
        // 收件
        handleReceivePackage(row){
            if(this.orderId){
                this.getData(global.baseUrl + '/orderUser/receivePackage',{'orderCode':this.orderId},'post',(resp)=>{
                    console.log(resp);
                    if(resp.data.success){
                        this.$message({
                            message: '收入快递成功',
                            type: 'success'
                        });
                        // 发件成功后刷新列表
                        window.location.reload()
                    }else{
                        this.$message.error(resp.data.message)
                    }
                });
            }else{
                this.$message.error('请填写要收入的快递单号');
            }
        },
        // 发件
        handlesendPackage(row,state){
            if(this.kdyUserId){
                this.getData(global.baseUrl + '/orderUser/sendPackage',{'orderId':row.id,'kdyUserId':this.kdyUserId},'post',(resp)=>{
                    if(resp.data.success){
                        this.visible = false;
                        this.$message({
                            message: '发件成功',
                            type: 'success'
                        });
                        // 发件成功后刷新列表
                        this.getData(global.baseUrl + '/orderInfo/orderLikeQuery?nameLike=&number=1&page='+this.page+'&limit='+this.limit+'&type='+state,'','get',(resp)=>{
                            if(resp.data.success){
                                this.tableData = resp.data.data.data;
                                this.total = resp.data.data.count
                            }else{
                                this.$message.error(resp.data.message);
                            }
                        })
                    }else{        
                        this.$message.error(resp.data.message);
                    }
                });
            }else{
                this.$message.error("请选择一个快递员");
            }
        },
        // 运输完成
        handleupdateFinish(row){
            this.getData(global.baseUrl + '/orderUser/updateFinish',{'orderId':row.id},'post',(resp)=>{
                if(resp.data.success){
                    this.$message({
                        message: '运输成功',
                        type: 'success'
                    });
                    window.location.reload()
                }
            });
        },
        // 查看快递
        handleSee(index, row) {
            this.getData( global.baseUrl + '/orderInfo/transportAll?orderId='+row.id,'','',(resp)=>{
                if(resp.data.success){
                    this.activities =  resp.data.data;
                }else{        
                    this.$message.error(resp.data.message);
                }
            })
        },
        // 查看订单详情
        handleXq(index, row){
            this.getData( global.baseUrl + '/orderInfo/detail?id='+row.id,'','',(resp)=>{
                if(resp.data.success){
                    this.details =  resp.data.data;
                }else{        
                    this.$message.error(resp.data.message);
                }
            })
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            // 请求数据
            this.getData( global.baseUrl + '/orderInfo/orderLikeQuery?nameLike=&number=1&type='+this.label+'&page=1&limit='+val,'','',this.getTabData)
            this.limit = val
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            // 请求数据
            this.getData( global.baseUrl + '/orderInfo/orderLikeQuery?nameLike=&number=1&type='+this.label+'&limit=1&page='+val,'','',this.getTabData)
            this.page = val
        },
        handleClick(tab, event) {
            // 请求数据
            this.getData( global.baseUrl + '/orderInfo/orderLikeQuery?nameLike=&number=1&page='+this.page+'&limit='+this.limit+'&type='+tab.label,'','',this.getTabData);
            this.label = tab.label
            this.pageSizes = [1, 5, 10, 20]
        },
        getTabData(resp){
            console.log(resp)
            if(resp.data.success){
                this.tableData = resp.data.data.data;
                this.total = resp.data.data.count
            }else{
                this.$message.error(resp.data.message);
            }
        },
        // 获取快递员
        getKdy(row){
            console.log(row);
            // 获取快递员列表
            this.getData(global.baseUrl + '/userInfo/getKNotSelf?orderId='+ row.id,'','get',(resp)=>{
                if(resp.data.success){
                    this.options = resp.data.data;
                    console.log(this.options);
                }else{
                    this.$message.error(resp.data.message);
                }
            })
        },
        getData(url,data,type,fn){
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                    'token':sessionStorage.getItem('token')
                },
                method: type,
                url: url,
                data: qs.stringify(data)
            }).then((resp)=>{
                if(fn){
                    fn(resp);
                }else{
                    console.log(resp);
                }
            })
            .catch((error)=>{
                this.$message.error('网络出错了');
            })
        },
    }
}
</script>
<style scoped>
.border-card{
    width: 1200px;
    margin: 0 auto;
}
.detail li{
    line-height: 30px;
}
.detail li span:nth-child(1){
    display: inline-block;
    width: 100px;
}
</style>
